<template>
    <div class="goods-body">
        <!-- 商品展示区 -->
        <div class="mui-card">
            <div class="mui-card-content-inner">
                <swipeCom :swipeImgList="humImg" :isW100="isW100"></swipeCom>
            </div>
        </div>
        <!-- 商品购买区 -->
        <div class="mui-card goods-buy">
            <div class="mui-card-header">
               <h2>{{ goodsInfo.title }}</h2>
            </div>
            <div class="mui-card-content-inner">
                <div class="price">
                    <span>市场价：<s>￥{{ goodsInfo.market_price }}</s>&nbsp;&nbsp;</span>
                    <span>销售价：<output>￥{{ goodsInfo.sell_price }}</output></span>
                </div>
                <div class="buyNum">
                    购买数量：<goodsNumBox @getnum="fromInputNum" :maxnum="goodsInfo.stock_quantity"></goodsNumBox>
                </div>
                <mt-button type="primary" size="small">立即购买</mt-button>
                <mt-button type="danger" size="small" @click="addToShopcar">加入购物车</mt-button>
            </div>
        </div>
        <transition @before-enter="ballEnterBefore" @enter="ballEnter" @after-enter="hiddeBall">
            <div class="ball" v-show="ballVisball" ref="ball"></div>
        </transition>
        <!-- 商品参数区 -->
        <div class="mui-card goods-param">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content-inner">
                <p>商品编号：{{ goodsInfo.goods_no }}</p>
                <p>库存情况：{{ goodsInfo.stock_quantity }}件</p>
                <p>上架时间：{{ goodsInfo.add_time | dateFormat }}</p>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="toGoodsDesc(id)">详细介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="toGoodsProdRev(id)">商品评论</mt-button>
            </div>
        </div>

    </div>
</template>

<script>

    import goodsNumBox from './subcomponents/goods_numbox.vue';

    export default {
        data () {
            return {
                id: this.$route.params.id,
                humImg:[],
                isW100: false,
                goodsInfo: {},
                ballVisball: false, //控制小球显示隐藏的标识符
                selectNum: 1, // 保存选中的商品数量，默认值为 1
            }
        },
        created () {
            this.gettHumImg();
            this.getGoodsInfo();
        },
        methods: {
            gettHumImg () {
                this.$http.get('api/getthumimages/' + this.id).then(res => {
                    if ( res.body.status === 0 ) {
                        this.humImg = res.body.message;
                    } else {
                        this.$toast('获取轮播图失败');
                    }
                })
            },
            getGoodsInfo () {
                this.$http.get( 'api/goods/getinfo/' + this.id ).then(res => {
                    if ( res.body.status === 0 ) {
                        this.goodsInfo = res.body.message[0];
                    } else {
                        this.$toast('商品信息获取失败');
                    }
                })
            },
            toGoodsDesc (id) {
                this.$router.push( '/home/goodslist/goods/desc/' + id );
            },
            toGoodsProdRev (id) {
                this.$router.push( '/home/goodslist/goods/prodrev/' + id );
            },
            addToShopcar () {
                this.ballVisball = !this.ballVisball;
                // 关于这个数据为什么要这么设计：1、为什么是个对象，2、为什么有这四个数据内容，3、在状态管理 store 中为什么是个数组。是重点
                var carData = { id: this.id, num: this.selectNum, price: this.goodsInfo.sell_price, isbuy:true }
                //怎么把这个数据添加到状态管理中呢？---->通过状态管理工具的 commit() 方法进行传递：传给了谁，谁接收了什么参数这俩要搞清楚！！！
                this.$store.commit( 'addCarData', carData );
            },
            ballEnterBefore (el) {
                el.style.transform = 'translate(0,0)';
            },
            ballEnter (el,d) {
                // 这些东西在钩子函数里获取比较方便，不用翻山越岭去存、取值了，这个动画用钩子函数做的根本原因是在这里，数据的动态获取
                const ballPst = this.$refs.ball.getBoundingClientRect();
                console.log(ballPst);// getBoundingClientRect()获取的对象有八个值
                const badgePst = document.getElementById('badge').getBoundingClientRect();
                const xDist = badgePst.left - ballPst.left;
                const yDist = badgePst.top - ballPst.top; // top left bottom right 均小写
                el.offsetWidth;
                el.style.transform = `translate(${xDist}px, ${yDist}px)`;
                el.style.transition = 'transform .6s cubic-bezier(.4,-0.3,1,.68)';
                d();
            },
            hiddeBall (el) {
                this.ballVisball = !this.ballVisball;
            },
            fromInputNum (n) {
                this.selectNum = n;
            },
        },
        components: {
            goodsNumBox,
        }
    }
</script>

<style lang="scss" scoped>
    .goods-body {
        overflow: hidden; // MUI 组件引入之后，与组件最外层 div 存在外边距合并的问题，用 MUI 自己的总类也存在该问题

        h2 {
            font-weight: 400;
            font-size: 17px;
        }

        .goods-buy {
            .price {
                s {
                    font-size: 12px;
                }
                output {
                    color: #f00;
                    font-weight: 600;
                }
            }
            .buyNum {
                padding: 10px 0;
            }
        }

        .goods-param {
            .mui-card-footer {
                display: block;
                button:first-child {
                    margin-bottom: 15px;
                }
            }
        }

        .ball {
            width: 15px;
            height: 15px;
            background-color: #f00;
            border-radius: 50%;
            z-index: 999;
            position: absolute;
            top: 392px;
            left: 148px;
        }
        /* .ball-enter-to {
            transform: translate(90px, 210px);
        }
        .ball-leave {
            display: none;
        }
        .ball-enter-active {
            transition: transform .6s cubic-bezier(.4,-0.3,1,.68);
        } */
    }

</style>
 
